<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆模拟运行监控系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Courier New', monospace;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        /* 背景动画效果 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 80%, rgba(0, 150, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 200, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(0, 100, 255, 0.05) 0%, transparent 50%);
            animation: backgroundShift 10s ease-in-out infinite;
        }

        @keyframes backgroundShift {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.8;
            }
        }

        /* 网格背景 */
        body::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                linear-gradient(rgba(0, 150, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 150, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 20s linear infinite;
        }

        @keyframes gridMove {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(50px, 50px);
            }
        }

        .container {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 400px;
            padding: 20px;
        }

        .auth-card {
            background: rgba(0, 20, 40, 0.9);
            border: 2px solid #00aaff;
            border-radius: 15px;
            padding: 40px 30px;
            box-shadow:
                0 0 30px rgba(0, 150, 255, 0.3),
                inset 0 0 30px rgba(0, 150, 255, 0.1);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .auth-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #00aaff, #0088cc, #0066aa, #00aaff);
            border-radius: 15px;
            z-index: -1;
            animation: borderGlow 3s linear infinite;
        }

        @keyframes borderGlow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo h1 {
            color: #00aaff;
            font-size: 2.5em;
            font-weight: bold;
            text-shadow: 0 0 20px rgba(0, 150, 255, 0.8);
            letter-spacing: 3px;
            margin-bottom: 10px;
        }

        .logo p {
            color: #66ccff;
            font-size: 0.9em;
            opacity: 0.8;
        }

        .form-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(0, 150, 255, 0.3);
        }

        .tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            color: #66ccff;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .tab.active {
            color: #00aaff;
            border-bottom-color: #00aaff;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
        }

        .tab:hover {
            color: #00aaff;
            background: rgba(0, 150, 255, 0.1);
        }

        .form-container {
            position: relative;
        }

        .form {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }

        .form.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            color: #66ccff;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 0.9em;
        }

        .input-wrapper {
            position: relative;
        }

        .form-input {
            width: 100%;
            padding: 12px 15px;
            background: rgba(0, 30, 60, 0.8);
            border: 2px solid rgba(0, 150, 255, 0.3);
            border-radius: 8px;
            color: #ffffff;
            font-size: 1em;
            transition: all 0.3s ease;
            font-family: 'Courier New', monospace;
        }

        .form-input:focus {
            outline: none;
            border-color: #00aaff;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.4);
            background: rgba(0, 40, 80, 0.9);
        }

        .form-input::placeholder {
            color: rgba(102, 204, 255, 0.5);
        }

        .code-group {
            display: flex;
            gap: 10px;
        }

        .code-group .form-input {
            flex: 1;
        }

        .send-code-btn {
            padding: 12px 20px;
            background: linear-gradient(45deg, #00aaff, #0088cc);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-family: 'Courier New', monospace;
        }

        .send-code-btn:hover {
            background: linear-gradient(45deg, #0088cc, #0066aa);
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.4);
        }

        .send-code-btn:disabled {
            background: rgba(0, 150, 255, 0.3);
            cursor: not-allowed;
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, #00aaff, #0088cc);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            background: linear-gradient(45deg, #0088cc, #0066aa);
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
            transform: translateY(-2px);
        }

        .submit-btn:active {
            transform: translateY(0);
        }

        .forgot-password {
            text-align: center;
            margin-top: 20px;
        }

        .forgot-password a {
            color: #66ccff;
            text-decoration: none;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .forgot-password a:hover {
            color: #00aaff;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
        }

        .message {
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-weight: bold;
            text-align: center;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message.success {
            background: rgba(0, 255, 100, 0.2);
            border: 1px solid #00ff64;
            color: #00ff64;
        }

        .message.error {
            background: rgba(255, 0, 100, 0.2);
            border: 1px solid #ff0064;
            color: #ff0064;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #00aaff;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .container {
                padding: 10px;
            }

            .auth-card {
                padding: 30px 20px;
            }

            .logo h1 {
                font-size: 2em;
            }

            .code-group {
                flex-direction: column;
            }

            .send-code-btn {
                margin-top: 10px;
            }
        }

        /* 粒子效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #00aaff;
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0;
            }

            50% {
                transform: translateY(-100px) rotate(180deg);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <!-- 粒子效果 -->
    <div class="particles" id="particles"></div>

    <div class="container">
        <div class="auth-card">
            <div class="logo">
                <h1>CYBERSPACE</h1>
                <p>Welcome to the Digital Realm</p>
            </div>

            <div class="form-tabs">
                <div class="tab active" data-tab="login">登录</div>
                <div class="tab" data-tab="register">注册</div>
                <div class="tab" data-tab="forgot">找回密码</div>
            </div>

            <div class="form-container">
                <!-- 登录表单 -->
                <form class="form active" id="loginForm">
                    <div class="form-group">
                        <label for="loginEmail">邮箱地址</label>
                        <div class="input-wrapper">
                            <input type="email" id="loginEmail" class="form-input" placeholder="请输入邮箱地址" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="loginPassword" class="form-input" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <button type="submit" class="submit-btn">
                        <span class="btn-text">登录</span>
                    </button>
                    <div class="forgot-password">
                        <a href="#" onclick="switchTab('forgot')">忘记密码？</a>
                    </div>
                </form>

                <!-- 注册表单 -->
                <form class="form" id="registerForm">
                    <div class="form-group">
                        <label for="registerEmail">邮箱地址</label>
                        <div class="input-wrapper">
                            <input type="email" id="registerEmail" class="form-input" placeholder="请输入邮箱地址" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="registerPassword" class="form-input" placeholder="请输入密码"
                                required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="registerCode">验证码</label>
                        <div class="code-group">
                            <input type="text" id="registerCode" class="form-input" placeholder="请输入验证码" required>
                            <button type="button" class="send-code-btn" onclick="sendCode('register')">
                                <span class="btn-text">发送验证码</span>
                            </button>
                        </div>
                    </div>
                    <button type="submit" class="submit-btn">
                        <span class="btn-text">注册</span>
                    </button>
                </form>

                <!-- 找回密码表单 -->
                <form class="form" id="forgotForm">
                    <div class="form-group">
                        <label for="forgotEmail">邮箱地址</label>
                        <div class="input-wrapper">
                            <input type="email" id="forgotEmail" class="form-input" placeholder="请输入邮箱地址" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="forgotCode">验证码</label>
                        <div class="code-group">
                            <input type="text" id="forgotCode" class="form-input" placeholder="请输入验证码" required>
                            <button type="button" class="send-code-btn" onclick="sendCode('forgot')">
                                <span class="btn-text">发送验证码</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="forgotPassword">新密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="forgotPassword" class="form-input" placeholder="请输入新密码" required>
                        </div>
                    </div>
                    <button type="submit" class="submit-btn">
                        <span class="btn-text">重置密码</span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentTab = 'login';
        let codeTimers = {};

        // 初始化
        document.addEventListener('DOMContentLoaded', function () {
            createParticles();
            initializeForms();
        });

        // 创建粒子效果
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 50;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 初始化表单
        function initializeForms() {
            // 标签页切换
            document.querySelectorAll('.tab').forEach(tab => {
                tab.addEventListener('click', function () {
                    const tabName = this.dataset.tab;
                    switchTab(tabName);
                });
            });

            // 表单提交
            document.getElementById('loginForm').addEventListener('submit', handleLogin);
            document.getElementById('registerForm').addEventListener('submit', handleRegister);
            document.getElementById('forgotForm').addEventListener('submit', handleForgotPassword);
        }

        // 切换标签页
        function switchTab(tabName) {
            // 更新标签页状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');

            // 更新表单显示
            document.querySelectorAll('.form').forEach(form => {
                form.classList.remove('active');
            });
            document.getElementById(tabName + 'Form').classList.add('active');

            currentTab = tabName;
            clearMessages();
        }

        // 发送验证码
        async function sendCode(type) {
            const emailField = type === 'register' ? 'registerEmail' : 'forgotEmail';
            const email = document.getElementById(emailField).value;
            const button = event.target;

            if (!email) {
                showMessage('请先输入邮箱地址', 'error');
                return;
            }

            if (!isValidEmail(email)) {
                showMessage('请输入有效的邮箱地址', 'error');
                return;
            }

            // 禁用按钮并显示倒计时
            button.disabled = true;
            button.innerHTML = '<span class="loading"></span>发送中...';

            try {
                const response = await fetch('http://localhost:8080/user/sendCode', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `email=${encodeURIComponent(email)}`
                });

                const result = await response.json();

                if (result.code === 200) {
                    showMessage('验证码已发送到您的邮箱', 'success');
                    startCountdown(button, 60);
                } else {
                    showMessage(result.msg || '发送验证码失败', 'error');
                    button.disabled = false;
                    button.innerHTML = '<span class="btn-text">发送验证码</span>';
                }
            } catch (error) {
                showMessage('网络错误，请稍后重试', 'error');
                button.disabled = false;
                button.innerHTML = '<span class="btn-text">发送验证码</span>';
            }
        }

        // 倒计时
        function startCountdown(button, seconds) {
            const timer = setInterval(() => {
                button.innerHTML = `<span class="btn-text">${seconds}秒后重发</span>`;
                seconds--;

                if (seconds < 0) {
                    clearInterval(timer);
                    button.disabled = false;
                    button.innerHTML = '<span class="btn-text">发送验证码</span>';
                }
            }, 1000);
        }

        // 处理登录
        async function handleLogin(e) {
            e.preventDefault();
            const email = document.getElementById('loginEmail').value;
            const password = document.getElementById('loginPassword').value;
            const button = e.target.querySelector('.submit-btn');

            if (!email || !password) {
                showMessage('请填写完整信息', 'error');
                return;
            }

            setLoading(button, true);

            try {
                const response = await fetch('http://localhost:8080/user/signIn', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
                });

                const result = await response.json();

                if (result.code === 200) {
                    showMessage('登录成功！', 'success');
                    // 跳转到车辆监控页面
                    setTimeout(() => {
                        window.location.href = 'index.html';
                    }, 1500);
                } else {
                    showMessage(result.msg || '登录失败', 'error');
                }
            } catch (error) {
                showMessage('网络错误，请稍后重试', 'error');
            } finally {
                setLoading(button, false);
            }
        }

        // 处理注册
        async function handleRegister(e) {
            e.preventDefault();
            const email = document.getElementById('registerEmail').value;
            const password = document.getElementById('registerPassword').value;
            const authCode = document.getElementById('registerCode').value;
            const button = e.target.querySelector('.submit-btn');

            if (!email || !password || !authCode) {
                showMessage('请填写完整信息', 'error');
                return;
            }

            if (!isValidEmail(email)) {
                showMessage('请输入有效的邮箱地址', 'error');
                return;
            }

            setLoading(button, true);

            try {
                const response = await fetch('http://localhost:8080/user/signUp', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}&authCode=${encodeURIComponent(authCode)}`
                });

                const result = await response.json();

                if (result.code === 200) {
                    showMessage('注册成功！', 'success');
                    setTimeout(() => {
                        switchTab('login');
                    }, 1500);
                } else {
                    showMessage(result.msg || '注册失败', 'error');
                }
            } catch (error) {
                showMessage('网络错误，请稍后重试', 'error');
            } finally {
                setLoading(button, false);
            }
        }

        // 处理找回密码
        async function handleForgotPassword(e) {
            e.preventDefault();
            const email = document.getElementById('forgotEmail').value;
            const newPassword = document.getElementById('forgotPassword').value;
            const authCode = document.getElementById('forgotCode').value;
            const button = e.target.querySelector('.submit-btn');

            if (!email || !newPassword || !authCode) {
                showMessage('请填写完整信息', 'error');
                return;
            }

            if (!isValidEmail(email)) {
                showMessage('请输入有效的邮箱地址', 'error');
                return;
            }

            setLoading(button, true);

            try {
                const response = await fetch('http://localhost:8080/user/forgetPassword', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `email=${encodeURIComponent(email)}&newPassword=${encodeURIComponent(newPassword)}&authCode=${encodeURIComponent(authCode)}`
                });

                const result = await response.json();

                if (result.code === 200) {
                    showMessage('密码重置成功！', 'success');
                    setTimeout(() => {
                        switchTab('login');
                    }, 1500);
                } else {
                    showMessage(result.msg || '密码重置失败', 'error');
                }
            } catch (error) {
                showMessage('网络错误，请稍后重试', 'error');
            } finally {
                setLoading(button, false);
            }
        }

        // 设置加载状态
        function setLoading(button, isLoading) {
            const btnText = button.querySelector('.btn-text');
            if (isLoading) {
                button.disabled = true;
                btnText.innerHTML = '<span class="loading"></span>处理中...';
            } else {
                button.disabled = false;
                btnText.innerHTML = button.textContent.includes('登录') ? '登录' :
                    button.textContent.includes('注册') ? '注册' : '重置密码';
            }
        }

        // 显示消息
        function showMessage(message, type) {
            clearMessages();

            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            messageDiv.textContent = message;

            const form = document.querySelector('.form.active');
            form.insertBefore(messageDiv, form.firstChild);

            // 3秒后自动清除消息
            setTimeout(() => {
                if (messageDiv.parentNode) {
                    messageDiv.parentNode.removeChild(messageDiv);
                }
            }, 3000);
        }

        // 清除消息
        function clearMessages() {
            document.querySelectorAll('.message').forEach(msg => {
                msg.remove();
            });
        }

        // 验证邮箱格式
        function isValidEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

        // 添加键盘事件监听
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                const activeForm = document.querySelector('.form.active');
                if (activeForm) {
                    activeForm.dispatchEvent(new Event('submit'));
                }
            }
        });
    </script>
</body>

</html>